<template>
  <div class="home-container">
    <div class="background"></div>
    
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">欢迎使用投产演练系统</h1>
      <p class="page-subtitle">一站式管理您的所有任务流程</p>
    </div>
    
    <!-- 功能卡片区域 -->
    <div class="features-grid">
      <!-- 任务管理卡片 -->
      <div class="feature-card" @click="handleNavigate('/task-management')">
        <div class="card-header">
          <span class="card-icon">📋</span>
          <h3 class="card-title">任务管理</h3>
        </div>
        <p class="card-description">查看、创建和管理所有任务</p>
        <div class="card-footer">
          <span class="card-count">{{ taskCount }}</span>
          <span class="card-count-label">任务总数</span>
        </div>
      </div>
      
      <!-- 部门管理卡片 -->
      <div class="feature-card" @click="handleNavigate('/department-management')">
        <div class="card-header">
          <span class="card-icon">🏢</span>
          <h3 class="card-title">部门管理</h3>
        </div>
        <p class="card-description">管理组织架构和部门信息</p>
        <div class="card-footer">
          <span class="card-count">{{ departmentCount }}</span>
          <span class="card-count-label">部门总数</span>
        </div>
      </div>
      
      <!-- 用户管理卡片 -->
      <div class="feature-card" @click="handleNavigate('/user-management')">
        <div class="card-header">
          <span class="card-icon">👥</span>
          <h3 class="card-title">用户管理</h3>
        </div>
        <p class="card-description">管理系统用户和权限</p>
        <div class="card-footer">
          <span class="card-count">{{ userCount }}</span>
          <span class="card-count-label">用户总数</span>
        </div>
      </div>
      
      <!-- 应用管理卡片 -->
      <div class="feature-card" @click="handleNavigate('/application-management')">
        <div class="card-header">
          <span class="card-icon">📱</span>
          <h3 class="card-title">应用管理</h3>
        </div>
        <p class="card-description">管理系统中的应用程序</p>
        <div class="card-footer">
          <span class="card-count">{{ applicationCount }}</span>
          <span class="card-count-label">应用总数</span>
        </div>
      </div>
      
      <!-- 角色定义卡片 -->
      <div class="feature-card" @click="handleNavigate('/role-definition')">
        <div class="card-header">
          <span class="card-icon">👑</span>
          <h3 class="card-title">角色定义</h3>
        </div>
        <p class="card-description">创建和管理系统角色</p>
        <div class="card-footer">
          <span class="card-count">{{ roleCount }}</span>
          <span class="card-count-label">角色总数</span>
        </div>
      </div>
      
      <!-- 角色路由管理卡片 -->
      <div class="feature-card" @click="handleNavigate('/role-route-management')">
        <div class="card-header">
          <span class="card-icon">🧭</span>
          <h3 class="card-title">角色路由管理</h3>
        </div>
        <p class="card-description">管理角色与路由的关联</p>
        <div class="card-footer">
          <span class="card-count">{{ roleRouteCount }}</span>
          <span class="card-count-label">路由总数</span>
        </div>
      </div>
      
      <!-- 路由字段配置卡片 -->
      <div class="feature-card" @click="handleNavigate('/route-field-configuration')">
        <div class="card-header">
          <span class="card-icon">📝</span>
          <h3 class="card-title">路由字段配置</h3>
        </div>
        <p class="card-description">配置和管理路由字段</p>
        <div class="card-footer">
          <span class="card-count">{{ routeFieldCount }}</span>
          <span class="card-count-label">字段总数</span>
        </div>
      </div>
      
      <!-- 路由规则卡片 -->
      <div class="feature-card" @click="handleNavigate('/routing-rules')">
        <div class="card-header">
          <span class="card-icon">📜</span>
          <h3 class="card-title">路由规则</h3>
        </div>
        <p class="card-description">定义和管理路由规则</p>
        <div class="card-footer">
          <span class="card-count">{{ routingRulesCount }}</span>
          <span class="card-count-label">规则总数</span>
        </div>
      </div>
      
      <!-- 流程设计卡片 -->
      <div class="feature-card" @click="handleNavigate('/task-process-designer')">
        <div class="card-header">
          <span class="card-icon">🗺️</span>
          <h3 class="card-title">任务流程设计</h3>
        </div>
        <p class="card-description">设计和配置任务流程</p>
        <div class="card-footer">
          <span class="card-count">{{ processCount }}</span>
          <span class="card-count-label">流程总数</span>
        </div>
      </div>
      
      <!-- 数据源配置卡片 -->
      <div class="feature-card" @click="handleNavigate('/data-source-configuration')">
        <div class="card-header">
          <span class="card-icon">📊</span>
          <h3 class="card-title">数据源配置</h3>
        </div>
        <p class="card-description">配置和管理数据源</p>
        <div class="card-footer">
          <span class="card-count">{{ dataSourceCount }}</span>
          <span class="card-count-label">数据源总数</span>
        </div>
      </div>
      
      <!-- 全流程投演卡片 -->
      <div class="feature-card" @click="handleNavigate('/route-simulation')">
        <div class="card-header">
          <span class="card-icon">🚀</span>
          <h3 class="card-title">全流程投演</h3>
        </div>
        <p class="card-description">管理全流程投演工作</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import taskService from '../services/taskService';
import userService from '../services/userService';
import departmentService from '../services/departmentService';
import applicationService from '../services/applicationService';
import { getRoleConfigs } from '../services/roleConfigService';
import { getProcessConfigs } from '../services/processConfigService';
import { getRoutingRules } from '../services/roleRouteService';
import { getRoutingFields } from '../services/routeFieldService';
import { get } from '../utils/request';

export default {
  name: 'Home',
  setup() {
    const router = useRouter();
    
    console.log('Home component is mounted');
    
    // 数据统计 - 使用默认值确保卡片显示
    const taskCount = ref('0');
    const userCount = ref('0');
    const departmentCount = ref('0');
    const applicationCount = ref('0');
    const roleCount = ref('0');
    const processCount = ref('0');
    const dataSourceCount = ref('0');
    const roleRouteCount = ref('0');
    const routeFieldCount = ref('0');
    const routingRulesCount = ref('0');
    
    // 获取数据统计
    const fetchStatistics = async () => {
      try {
        console.log('开始获取统计数据');
        
        // 并行获取所有统计数据（不加page参数，获取完整信息）
        const [
          tasksResponse,
          usersResponse,
          departmentsResponse,
          applicationsResponse,
          rolesResponse,
          processesResponse,
          dataSourcesResponse,
          roleRoutesResponse,
          routeFieldsResponse,
          routingRulesResponse
        ] = await Promise.all([
          // 获取任务总数
          taskService.getTasks(),
          // 获取用户总数
          userService.getUsers(),
          // 获取部门总数
          departmentService.getDepartments(),
          // 获取应用总数
          applicationService.getApplications(),
          // 获取角色总数
          getRoleConfigs(),
          // 获取流程总数
          getProcessConfigs(),
          // 获取数据源配置总数
          get('/api/data-sources'),
          // 获取角色路由总数
          get('/api/role-routes'),
          // 获取路由字段总数
          getRoutingFields(),
          // 获取路由规则总数
          getRoutingRules()
        ]);
        
        // 处理响应数据
        if (tasksResponse && tasksResponse.data && Array.isArray(tasksResponse.data)) {
          taskCount.value = tasksResponse.data.length.toString();
        } else if (tasksResponse && tasksResponse.data && tasksResponse.data.total !== undefined) {
          taskCount.value = tasksResponse.data.total.toString();
        }
        
        if (usersResponse && usersResponse.data && Array.isArray(usersResponse.data)) {
          userCount.value = usersResponse.data.length.toString();
        } else if (usersResponse && usersResponse.data && usersResponse.data.total !== undefined) {
          userCount.value = usersResponse.data.total.toString();
        }
        
        if (departmentsResponse && departmentsResponse.data && Array.isArray(departmentsResponse.data)) {
          departmentCount.value = departmentsResponse.data.length.toString();
        } else if (departmentsResponse && departmentsResponse.data && departmentsResponse.data.total !== undefined) {
          departmentCount.value = departmentsResponse.data.total.toString();
        }
        
        if (applicationsResponse && applicationsResponse.data && Array.isArray(applicationsResponse.data)) {
          applicationCount.value = applicationsResponse.data.length.toString();
        } else if (applicationsResponse && applicationsResponse.data && applicationsResponse.data.total !== undefined) {
          applicationCount.value = applicationsResponse.data.total.toString();
        }
        
        if (rolesResponse && rolesResponse.data && Array.isArray(rolesResponse.data)) {
          roleCount.value = rolesResponse.data.length.toString();
        } else if (rolesResponse && rolesResponse.data && rolesResponse.data.total !== undefined) {
          roleCount.value = rolesResponse.data.total.toString();
        }
        
        if (processesResponse && processesResponse.data && Array.isArray(processesResponse.data)) {
          processCount.value = processesResponse.data.length.toString();
        } else if (processesResponse && processesResponse.data && processesResponse.data.total !== undefined) {
          processCount.value = processesResponse.data.total.toString();
        }
        
        // 处理数据源响应
        if (dataSourcesResponse && dataSourcesResponse.data && Array.isArray(dataSourcesResponse.data)) {
          dataSourceCount.value = dataSourcesResponse.data.length.toString();
        } else if (dataSourcesResponse && dataSourcesResponse.data && dataSourcesResponse.data.total !== undefined) {
          dataSourceCount.value = dataSourcesResponse.data.total.toString();
        }
        
        // 处理角色路由响应
        if (roleRoutesResponse && roleRoutesResponse.data && Array.isArray(roleRoutesResponse.data)) {
          roleRouteCount.value = roleRoutesResponse.data.length.toString();
        } else if (roleRoutesResponse && roleRoutesResponse.data && roleRoutesResponse.data.total !== undefined) {
          roleRouteCount.value = roleRoutesResponse.data.total.toString();
        }
        
        // 处理路由字段响应
        if (routeFieldsResponse && routeFieldsResponse.data && Array.isArray(routeFieldsResponse.data)) {
          routeFieldCount.value = routeFieldsResponse.data.length.toString();
        } else if (routeFieldsResponse && routeFieldsResponse.data && routeFieldsResponse.data.total !== undefined) {
          routeFieldCount.value = routeFieldsResponse.data.total.toString();
        }
        
        // 处理路由规则响应
        if (routingRulesResponse && routingRulesResponse.data && Array.isArray(routingRulesResponse.data)) {
          routingRulesCount.value = routingRulesResponse.data.length.toString();
        } else if (routingRulesResponse && routingRulesResponse.data && routingRulesResponse.data.total !== undefined) {
          routingRulesCount.value = routingRulesResponse.data.total.toString();
        }
        
        console.log('数据获取完成:', { 
          taskCount: taskCount.value,
          userCount: userCount.value,
          departmentCount: departmentCount.value,
          applicationCount: applicationCount.value,
          roleCount: roleCount.value,
          processCount: processCount.value,
          dataSourceCount: dataSourceCount.value,
          roleRouteCount: roleRouteCount.value,
          routeFieldCount: routeFieldCount.value,
          routingRulesCount: routingRulesCount.value
        });
      } catch (error) {
        console.error('获取统计数据失败:', error);
        // 保持默认值
      }
    };
    
    // 导航到指定路由
    const handleNavigate = (route) => {
      router.push(route);
    };
    
    // 组件挂载时获取数据
    onMounted(() => {
      fetchStatistics();
    });
    
    return {
      taskCount,
      userCount,
      departmentCount,
      applicationCount,
      roleCount,
      processCount,
      dataSourceCount,
      roleRouteCount,
      routeFieldCount,
      routingRulesCount,
      handleNavigate
    };
  }
};
</script>

<style scoped>
.home-container {
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  margin-top: 60px;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.page-header {
  text-align: center;
  margin-bottom: var(--spacing-xxl);
  position: relative;
  z-index: 1;
  padding-top: var(--spacing-xl);
}

.page-title {
  font-size: var(--font-size-xxl);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  font-weight: 700;
}

.page-subtitle {
  font-size: var(--font-size-md);
  color: var(--text-regular);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-xl);
  position: relative;
  z-index: 1;
  padding: 0 var(--spacing-xl) var(--spacing-xl);
  flex: 1;
  align-content: flex-start;
}

.feature-card {
  background: var(--bg-white);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-base);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.card-icon {
  font-size: var(--font-size-xl);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-light);
  border-radius: var(--border-radius-base);
}

.card-title {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  font-weight: 600;
}

.card-description {
  color: var(--text-regular);
  margin-bottom: auto;
  line-height: var(--line-height-lg);
}

.card-footer {
  margin-top: var(--spacing-lg);
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
}

.card-count {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--primary-color);
}

.card-count-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .home-container {
    padding: var(--spacing-lg);
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .page-title {
    font-size: var(--font-size-xl);
  }
}
</style>